<template>
	<view v-if="show">
		<!-- 居中 -->
		<view 
		class="popup flex flex-column justify-center align-center" 
		:class="[out ? 'fade-out' : 'fade-in']" 
		ref="popup" 
		@tap.stop="closebysd" @touchmove.stop.prevent="stopfun" 
		:style="{
			backgroundColor:bgColor, 
			zIndex:zIndex, 
			top:top+'px',
			animationDuration:duration+'ms'
		}" 
		v-if="position == 'center'">
			<view class="popup-content popup-center"
			 @tap.stop="stopfun" ref="popupCenter" 
			:class="[out ? 'scale-out' : 'scale-in']" 
			:style="{width:width, animationDuration:duration+'ms'}"><slot></slot></view>
		</view>
		<!-- 顶部 -->
		<view class="popup flex flex-column" 
		:style="{
			backgroundColor:bgColor, 
			zIndex:zIndex, top:top+'px',
			animationDuration:duration+'ms'
		}" 
		v-if="position == 'top'" 
		:class="[out ? 'fade-out' : 'fade-in']" ref="popup" 
		@tap.stop="closebysd" @touchmove.stop.prevent="stopfun">
			<view 
			class="popup-content popup-top" 
			@tap.stop="stopfun" ref="popupTop" 
			:class="[out ? 'top-out' : 'top-in']" 
			:style="{animationDuration:duration+'ms'}">
				<slot></slot>
			</view>
		</view>
		<!-- 底部 -->
		<view class="popup flex flex-column justify-end" 
		:style="{
			backgroundColor:bgColor, 
			zIndex:zIndex, 
			top:top+'px',
			animationDuration:duration+'ms'
		}" 
		v-if="position == 'bottom'" 
		:class="[out ? 'fade-out' : 'fade-in']" ref="popup" 
		@tap.stop="closebysd" @touchmove.stop.prevent="stopfun">
			<view 
			class="popup-content popup-bottom" 
			@tap.stop="stopfun" ref="popupBottom" 
			:class="[out ? 'bottom-out' : 'bottom-in']" 
			:style="{animationDuration:duration+'ms'}">
				<slot></slot>
			</view>
		</view>
		<!-- 左侧 -->
		<view class="popup flex flex-column" 
		v-if="position == 'left'"
		:class="[out ? 'fade-out' : 'fade-in']" 
		ref="popup" 
		@tap.stop="closebysd" @touchmove.stop.prevent="stopfun" 
		:style="{
			backgroundColor:bgColor, 
			zIndex:zIndex, 
			top:top+'px',
			animationDuration:duration+'ms'
		}">
			<view class="popup-content flex1 flex flex-column popup-left" 
			@tap.stop="stopfun" ref="popupLeft" 
			:class="[out ? 'left-out' : 'left-in']" 
			:style="{width:width, animationDuration:duration+'ms'}">
				<slot></slot>
			</view>
		</view>
		<!-- 右侧 -->
		<view class="popup flex flex-column align-end" 
		v-if="position == 'right'"
		:class="[out ? 'fade-out' : 'fade-in']" 
		ref="popup" 
		@tap.stop="closebysd" @touchmove.stop.prevent="stopfun" 
		:style="{
			backgroundColor:bgColor, 
			zIndex:zIndex, 
			top:top+'px',
			animationDuration:duration+'ms'
		}">
			<view class="popup-content flex1 flex flex-column popup-right" 
			@tap.stop="stopfun" ref="popupRight" 
			:class="[out ? 'right-out' : 'right-in']" 
			:style="{width:width, animationDuration:duration+'ms'}">
				<slot></slot>
			</view>
		</view>
	</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = weex.requireModule('animation');
var commonJS = require('./common.js');
// #endif
export default{
	name  : "f-popup",
	props : {
		bgColor         : { type : String,  default : 'rgba(0, 0, 0, 0.7)'},
		position        : { type : String,  default : 'center'},
		width           : { type : String,  default : '580rpx'},
		canCloseByShade : { type : Boolean, default : true },
		zIndex          : { type : Number,  default : 99999},
		top             : { type : Number,  default : 0},
		duration        : { type : Number,  default : 280}
	},
	data(){
		return {
			show : false,
			out  : false
		}
	},
	methods:{
		open    : function(){
			this.out  = false;
			this.show = true;
			// #ifdef APP-NVUE
			this.weexAnimateIn();
			// #endif
			this.$emit('open'); 
		},
		closebysd : function () {
			if(this.canCloseByShade){
				this.close();
			}
		},
		close   : function(){
			this.out = true;
			// #ifdef APP-NVUE
			this.weexAnimateOut();
			// #endif
			setTimeout(()=>{
				this.show = false;
				this.$emit('close'); 
			},350);
		},
		stopfun : function(e){e.stopPropagation(); return null;},
		
		// #ifdef APP-NVUE
		weexAnimateIn : function(){
			commonJS.getRefs('popup', this, 0, (popupref)=>{
				animation.transition(popupref, {
					styles: { opacity : 1},
					duration: this.duration, //ms
					timingFunction: 'ease',
					delay: 0 //ms
				});
			});
			
			if(this.position == 'center'){
				commonJS.getRefs('popupCenter', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: { transform:'scale(1)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}else if(this.position == 'top'){
				commonJS.getRefs('popupTop', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: {transform:'translateY(0px)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}else if(this.position == 'bottom'){
				commonJS.getRefs('popupBottom', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: {transform:'translateY(0px)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}else if(this.position == 'left'){
				commonJS.getRefs('popupLeft', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: {transform:'translateX(0px)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}else{
				commonJS.getRefs('popupRight', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: {transform:'translateX(0px)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}
			
		},
		weexAnimateOut : function(){
			commonJS.getRefs('popup', this, 0, (popupref)=>{
				animation.transition(popupref, {
					styles: { opacity : 0},
					duration: this.duration, //ms
					timingFunction: 'ease',
					delay: 0 //ms
				});
			});
			
			if(this.position == 'center'){
				commonJS.getRefs('popupCenter', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: { transform:'scale(0.3)' },
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}else if(this.position == 'top'){
				commonJS.getRefs('popupTop', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: {transform:'translateY(-600px)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}else if(this.position == 'bottom'){
				commonJS.getRefs('popupBottom', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: {transform:'translateY(600px)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}else if(this.position == 'left'){
				commonJS.getRefs('popupLeft', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: {transform:'translateX(-500px)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}else{
				commonJS.getRefs('popupRight', this, 0, (popupref)=>{
					animation.transition(popupref, {
						styles: {transform:'translateX(600px)'},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});
			}
		},
		// #endif
	}
}
</script>
<style>
.popup{width:750rpx; position:fixed; z-index:99999; left:0; top:0; bottom:0; flex:1;}
.popup-content{overflow:hidden;}
.fade-out{opacity:0;}
.popup-center{transform:scale(0.3,0.3);}
.popup-top{transform:translateY(-1000px);}
.popup-bottom{transform:translateY(600px);}
.popup-left{transform:translateX(-600px);}
.popup-right{transform:translateX(600px);}
/* #ifndef APP-NVUE */
.popup{height:100%;}
/* #endif */
</style>